import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { editFee, editInsureEnsurePlan, getInsureCompanyPlans } from '@/api/insureEnsurePlan'
import { getKeyToEnum, InsurePlanTypeCnEnum, InsureTypeCnEnum, OccupationLevelCnEnum, ValidRuleTypeCnEnum } from '@/const/enum'
import type { InsureEnsurePlanDto, InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
@Component
export class EditSchemePop extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop() detailData!: InsureEnsurePlanListDto

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.formConfig.show = this.show
    }
    @Watch('formConfig.show', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.formConfig.show)
    }

    insureCompanyName = ''
    ruleName = ''

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '编辑方案',
            width: '640px',
            theme: 'dark',
            show: false,
            labelCol: {
                style: {
                    width: '10em'
                }
            },
            params: {
                confirmText: '确定'
            },
            items: {
                planName: {
                    name: '方案简称',
                    element: 'input',
                    required: true
                },
                insureCompanyId: {
                    name: '保司选择',
                    required: true,
                    element: 'select',
                    optionsType: 'insureCompanyId',
                    callback: {
                        change: async (ev: number) => {
                            this.insureCompanyName = ev
                                ? this.formConfig.items.insureCompanyId.options?.find(
                                    (i) => i.value === ev
                                )?.label
                                : ''

                            this.formConfig.items.insureCompanyPlanId.hidden = !ev
                            this.formConfig.items.insureCompanyPlanId.value = ''
                            this.formConfig.items.insureCompanyPlanId.options = ev
                                ? (
                                    await getInsureCompanyPlans({
                                        insureCompanyId: ev
                                    })
                                ).map((i) => {
                                    return {
                                        label: i.key,
                                        value: i.value
                                    }
                                })
                                : []
                        }
                    }
                },
                insureType: {
                    name: '产品类型',
                    element: 'select',
                    defaultValue: InsureTypeCnEnum.长期保,
                    options: getKeyToEnum(InsureTypeCnEnum, false, ['长期保']),
                    readonly: true
                },
                insureCompanyPlanId: {
                    name: '保司方案',
                    element: 'select',
                    required: true,
                },
                dangerLevel: {
                    name: '风险等级',
                    element: 'checkboxGroup',
                    required: true,
                    options: getKeyToEnum(OccupationLevelCnEnum)
                },
                insurePlanType: {
                    name: '方案类型',
                    element: 'select',
                    required: true,
                    defaultValue: InsurePlanTypeCnEnum.灵活保单,
                    options: getKeyToEnum(InsurePlanTypeCnEnum)
                },
                effectType: {
                    name: '生效方式',
                    element: 'radioGroup',
                    required: true,
                    options: getKeyToEnum(ValidRuleTypeCnEnum)
                },
                ruleId: {
                    name: '方案规则',
                    element: 'select',
                    required: true,
                    optionsType: 'insureCompanyRule',
                    callback: {
                        change: (ev: number) => {
                            this.ruleName = ev
                                ? this.formConfig.items.ruleId.options?.find((i) => i.value === ev)
                                    ?.label
                                : ''
                        }
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                data.insureEnsurePlanId = this.detailData.id
                data.ruleName = this.ruleName
                await editInsureEnsurePlan(data)
                this.formConfig.show = false
                this.handleRefresh()
                // this.showChange(false)
            },
            cancel: () => {
                this.formConfig.show = false

                // this.showChange(false)
            },
            init: async () => {
                // this.detailData.totalDangerLevel = this.detailData.dangerLevel
                if (this.detailData.insureCompanyId) {
                    this.formConfig.items.insureCompanyPlanId.options = (await getInsureCompanyPlans({
                        insureCompanyId: this.detailData.insureCompanyId
                    })).map(i => {
                        return {
                            label: i.key,
                            value: i.value
                        }
                    })
                }
                this.ruleName = this.detailData.ruleName
                initModelValue(this.formConfig, this.detailData)
            }
        } as FormModalDto
    }
    render() {
        return <>{renderModal(this.formConfig)}</>
    }
}

export default toNative<{detailData: InsureEnsurePlanListDto}, { refresh: () => void }>(EditSchemePop)
